<template>
  <div class="whl-finance">
    <mt-swipe :auto="3000" class="whl-banner">
      <mt-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="" class="whl-banner-img" @click="goPage(1, item.router)">
      </mt-swipe-item>
    </mt-swipe>
    <div class="whl-box">
      <div @click="goPage(1, 'financeChild')">
        <h2>共享付</h2>
        <p>更多</p>
        <img src="../../assets/images/jiantou-tb.png" alt="">
      </div>
      <div>
        <div @click="goPage(3)">
          <img src="../../assets/images/zhifushenqing-tb.png" alt="">
          <p>开通支付申请</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/jijubangding-tb.png" alt="">
          <p>机具绑定</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/yinxiangbangding-tb.png" alt="">
          <p>音响绑定</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/jijujiebang-tb.png" alt="">
          <p>机具解绑</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/jisuanka-tb.png" alt="">
          <p>结算卡变更</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/mendianrenzheng-tb.png" alt="">
          <p>门店实名认证</p>
        </div>
      </div>
    </div>
    <div class="whl-box">
      <div @click="goPage(1, 'tongfuLoan')">
        <h2>同福贷</h2>
        <p>更多</p>
        <img src="../../assets/images/jiantou-tb.png" alt="">
      </div>
      <div>
        <div @click="goPage(3)">
          <img src="../../assets/images/hebei-tb.png" alt="">
          <p>河北银行</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/zhangjiakou-tb.png" alt="">
          <p>张家口银行</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/pingan-tb.png" alt="">
          <p>平安银行</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/suningyinghang-tb.png" alt="">
          <p>苏宁银行</p>
        </div>
      </div>
    </div>
    <div class="whl-box">
      <div @click="goPage(3)">
        <h2>智能设备</h2>
        <p>更多</p>
        <img src="../../assets/images/jiantou-tb.png" alt="">
      </div>
      <div>
        <div @click="goPage(3)">
          <img src="../../assets/images/juhemapei-tb.png" alt="">
          <p>聚合码牌</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/bobaoyinxiang-tb.png" alt="">
          <p>播报音响</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/shouyin-tb.png" alt="">
          <p>收银一体机</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/pos-icon.png" alt="">
          <p>POS机具</p>
        </div>
      </div>
    </div>
    <div class="whl-box">
      <div @click="goPage(3)">
        <h2>开卡申请</h2>
        <p>更多</p>
        <img src="../../assets/images/jiantou-tb.png" alt="">
      </div>
      <div>
        <div @click="goPage(3)">
          <img src="../../assets/images/pingan-tb.png" alt="">
          <p>平安银行</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/huaxiayinhang-tb.png" alt="">
          <p>华夏银行</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/zhangjiakou-tb.png" alt="">
          <p>张家口银行</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/pufayinhang-tb.png" alt="">
          <p>浦发银行</p>
        </div>
      </div>
    </div>
    <div class="whl-gap"></div>
  </div>
</template>
<script>
  import { Toast } from "mint-ui";
  import jsBridge from "../../tools/jsBridge";
  import { bannerList } from '../../js/banner'
  export default {
    data() {
      return {
        bannerList
      }
    },
    methods: {
      goPage( type, path = '', query = {}) {
        if(type === 1) {
          this.$router.push(
            { path: `/${path}`, query }
          );
        } else if (type === 2) {
          jsBridge.goNativePage({pageName: path});
        } else {
          Toast('近期上线，敬请期待...')
        }
      }
    }
  }
</script>
<style lang="scss">
@import "../../style/public";
.whl-finance {
  width: 100%;
  height: auto;
  overflow: hidden;
  .whl-banner {
    width: pw(355);
    height: pw(90);
    margin: 0 auto;
    margin-top: pw(50);
    border-radius: pw(10);
    .whl-banner-img {
      width: pw(355);
      height: pw(90);
      border-radius: pw(10);
    }
    .is-active {
      background-color: #fff !important;
    }
    .mint-swipe-indicator {
      background: #fff !important;
    }
  }
  .whl-box {
    width: pw(355);
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    background: #fff;
    border-radius: pw(10);
    padding-bottom: pw(10);
    margin-top: pw(10);
    &>div:first-child {
      width: 100%;
      height: pw(50);
      display: flex;
      align-items: center;
      padding: 0 pw(10);
      box-sizing: border-box;
      &>h2:first-child {
        dispaly: flex;
        color: #000;
        font-family: PingFang SC,serif;
        font-size: pw(18);
        font-style: normal;
        font-weight: 500;
        align-items: center;
      }
      &>p:nth-child(2) {
        width: auto;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;
        color: #666;
        font-size: pw(12);
        font-style: normal;
      }
      &>img:nth-child(3) {
        width: pw(12);
        height: pw(12);
      }
    }
    &>div:nth-child(2) {
      width: 100%;
      height: auto;
      overflow: hidden;
      display: grid;
      grid-template-rows: repeat(1, 1fr);
      grid-template-columns: repeat(2, 2fr);
      grid-gap: pw(10);
      padding: 0 pw(10);
      box-sizing: border-box;
      &>div {
        width: 100%;
        height: pw(50);
        background-color: #F8F8F8;
        border-radius: pw(4);
        display: flex;
        align-items: center;
        color: #333;
        font-size: pw(14);
        padding: pw(10);
        box-sizing: border-box;
        &>img {
          width: pw(30);
          height: pw(30);
        }
        &>p {
          margin-left: pw(10);
        }
      }
    }
  }
  .whl-gap {
    width: 100%;
    height: pw(50);
  }
}
</style>
